import PopconfirmButton from '@/components/BizButtons/PopconfirmButton';
import useActionControl from '@/hooks/useActionControl';
import SystemConfigEditModal from '@/pages/system/config/components/SystemConfigEditModal';
import ApiSystemConfig from '@/services/system/ApiSystemConfig';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { ProTable } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import ButtonGroup from 'antd/es/button/button-group';

const SystemConfigIndex = () => {
  const actionControl = useActionControl({
    editAction: {
      onModalOpen: (values) => ApiSystemConfig.detail(values.configId),
      onActionCall: (values) => ApiSystemConfig.edit(values),
    },
    addAction: {
      onActionCall: (values) => ApiSystemConfig.add(values),
    },
  });

  actionControl.queryParams.refill();

  return (
    <div>
      <ProTable
        {...actionControl.table}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params: any,
        ) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const data = await ApiSystemConfig.list(params);
          return {
            data: data.rows,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: data.total,
          };
        }}
        toolBarRender={() => [
          <Button
            key={'add'}
            loading={actionControl.loading.value}
            type="primary"
            onClick={() => {
              actionControl.actions.openAddModal();
            }}
          >
            新增
          </Button>,
          <PopconfirmButton
            key={'refreshCache'}
            buttonText={'刷新缓存'}
            title={'刷新缓存后, 会清空所有缓存, 确认刷新?'}
            buttonProps={{
              loading: actionControl.loading.value,
              danger: true,
            }}
            onConfirm={async () => {
              await ApiSystemConfig.refreshCache();
              message.info('缓存已清除');
            }}
          />,
        ]}
        rowKey={'configId'}
        columns={[
          {
            title: '参数主键',
            dataIndex: 'configId',
            hideInTable: true,
            hideInSearch: true,
          },
          { title: '参数名称', dataIndex: 'configName' },
          { title: '参数键名', dataIndex: 'configKey' },
          { title: '参数键值', dataIndex: 'configValue', hideInSearch: true },
          {
            title: '系统内置',
            dataIndex: 'configType',
            valueType: 'select',
            valueEnum: { N: '否', Y: '是' },
          },
          { title: '备注', dataIndex: 'remark', ellipsis: true },
          {
            title: '创建时间',
            dataIndex: 'createTime',
            hideInSearch: true,
            width: 160,
          },
          {
            render: (_, record) => {
              return (
                <ButtonGroup>
                  <Button
                    icon={<EditOutlined />}
                    loading={actionControl.loading.value}
                    disabled={actionControl.loading.value}
                    type={'link'}
                    onClick={() => {
                      actionControl.actions.openUpdateModal(record);
                    }}
                  >
                    修改
                  </Button>
                  <PopconfirmButton
                    buttonText={'删除'}
                    buttonProps={{
                      icon: <DeleteOutlined />,
                      type: 'link',
                      danger: true,
                      loading: actionControl.loading.value,
                    }}
                    title={'删除后不可恢复, 确认删除?'}
                    onConfirm={() => {
                      ApiSystemConfig.remove(record.configId).then(() => {
                        message.success('删除成功').then(() => {});
                        actionControl.table.actionRef.current?.reload();
                      });
                    }}
                  />
                </ButtonGroup>
              );
            },
          },
        ]}
      />

      <SystemConfigEditModal {...actionControl.editModal} />
    </div>
  );
};

export default SystemConfigIndex;
